<template>
	<view class="bgIndex ">
		<view class="flex margin-top_30rpx " style="width: 100%;color: #fff;">
			我的特点标签
		</view>
		<view class="flex margin-top_30rpx" style="width: 100%;color: rgb(228, 227, 227);">
			完善特征标签，将指引你遇见合适的TA
		</view>

		<view class="margin-top_40rpx">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				职业
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in labelList" :key="index"
					:class="!(seleNightArr.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">

					<text> {{item}}</text>

				</view>
				<view class="addTag flex" @click="addTagFn('1')">
					添加
				</view>
			</view>
		</view>
		<view class="margin-top_40rpx">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				运动
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in motionLabelList" :key="index"
					:class="!(motionSeleNightArr.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">
		
					<text> {{item}}</text>
		
				</view>
				<view class="addTag flex" @click="addTagFn('2')">
					添加
				</view>
			</view>
		</view>
		<view class="margin-top_40rpx">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				个人特质
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in traitsLabelList" :key="index"
					:class="!(traitsSeleNightArr.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">
		
					<text> {{item}}</text>
		
				</view>
				<view class="addTag flex" @click="addTagFn('3')">
					添加
				</view>
			</view>
		</view>
		<view class="margin-top_40rpx">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				美食
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in foodLabelList" :key="index"
					:class="!(foodSeleNightArr.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">
		
					<text> {{item}}</text>
		
				</view>
				<view class="addTag flex" @click="addTagFn('4')">
					添加
				</view>
			</view>
		</view>
		
		<view class="margin-top_40rpx">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				特殊经历
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in experienceLabelList" :key="index"
					:class="!(experienceSeleNightArr.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">
		
					<text> {{item}}</text>
		
				</view>
				<view class="addTag flex" @click="addTagFn('5')">
					添加
				</view>
			</view>
		</view>
		<view class="margin-top_40rpx" v-if="otherArr.length">
			<view style="color: #fff;font-size: 36rpx;" class="margin-bottom_30rpx">
				其他
			</view>
			<view class="flex-wrap-flex-start">
				<view @click="switchTagFn(index,item)" v-for="(item,index) in otherArr" :key="index"
					:class="!(otherArrSele.indexOf(item)==-1)?'tagLabels-active flex':'tagLabels flex'">
		
					<text> {{item}}</text>
		
				</view>
			
			</view>
		</view>
		<view class="confirm flex" @click="addTags()">
			确定
		</view>
		<!-- 添加标签 弹出框 -->
		<sunui-popup ref="pop">
			<template v-slot:content>
				
				<view class="v-pop-cls flex-column">
				    <view class="text-align_right " style="width: 90%;" >
				    	
				    	
						<uni-icons  type="closeempty" @click="closeTag()" size="20"></uni-icons>
						
				    </view>
		            <text class="margin-right_50rpx">添加标签</text>
					<input placeholder="请输入2到6个字标签" v-model="singleLabel" />
					<view class="flex add" @click="singleLabelClick()">添加</view>
				</view>
			</template>
		</sunui-popup>
		
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currentIndex: 0,
				labelList: ['PIA戏', '家产继承人', '新媒体从业', '教育从业者', 'rapper', '网红', '国服大神', '模特', '博主', '美容师', '托尼老师'],
				seleNightArr: [],
				
				motionLabelList: ['极限运动', '乒乓球', '撸铁狂魔', '各种球类多', '网球王子', '单车骑行', '篮球王'],
				motionSeleNightArr: [],
				
				traitsLabelList:['浪漫主义','唠嗑型选手','观察者','怀疑论者','理论大师实','间歇性高冷','对浪温过敏'],
				traitsSeleNightArr:[],
				
				foodLabelList:['芝士爱好者','泡芙','奶茶','螺狮粉','咖啡迷','冰美式','韩式料理','蛋糕糕点','生椰拿铁','东南亚菜'],
				foodSeleNightArr:[],
				
				experienceLabelList:['组过乐队','做过up主','创过业','拍电影','独立旅行','创过业','当群演','母胎单身','做过义工','写过歌'],
				experienceSeleNightArr:[],
				otherArr:[],
				otherArrSele:[],
				
				singleLabel:'',
				addTagType:null,
				tagsListAll:[]
			}
		},
		onLoad(options) {
           if(options.itemLabel){
			   this.tagsListAll=decodeURIComponent(options.itemLabel).split(',')
			    console.log(this.tagsListAll,'tagsListAll')
				
				
			this.seleNightArr = this.findMatches(this.tagsListAll,this.labelList)
			console.log(this.seleNightArr)
			this.motionSeleNightArr = this.findMatches(this.tagsListAll,this.motionLabelList)
			this.traitsSeleNightArr = this.findMatches(this.tagsListAll,this.traitsLabelList)
			this.foodSeleNightArr = this.findMatches(this.tagsListAll,this.foodLabelList)
			this.experienceSeleNightArr = this.findMatches(this.tagsListAll,this.experienceLabelList)
			
			// 
			const tagsList=[...this.seleNightArr,...this.motionSeleNightArr,...this.traitsSeleNightArr,...this.foodSeleNightArr,...this.experienceSeleNightArr]
			
			this.otherArr=this.findNonMatches(this.tagsListAll,tagsList)
			this.otherArrSele=this.findNonMatches(this.tagsListAll,tagsList)
			console.log('otherArr',this.otherArr)
			
		   }

		},
		
		methods: {
			 findNonMatches(array1, array2) {
			    let results = [];
			    
			    for (let item1 of array1) {
			        let matched = false;
			        for (let item2 of array2) {
			            if (item1.includes(item2) || item2.includes(item1)) {
			                matched = true;
			                break;
			            }
			        }
			        if (!matched) {
			            results.push(item1);
			        }
			    }
			    
			    return results;
			},
			 findMatches(array1, array2) {
			    let results = [];
			    
			    for (let item1 of array1) {
			        for (let item2 of array2) {
			            if (item1.includes(item2) || item2.includes(item1)) {
			                results.push(item1);
			                break;
			            }
			        }
			    }
			    
			    return results;
			},
			addTagFn(index) {
				this.addTagType=index
				this.$refs.pop.show({
					anim: 'center',
					shadeClose: false,
					topclose: false
				});
			},
			addTags(){
				const tagsList=[...this.seleNightArr,...this.motionSeleNightArr,...this.traitsSeleNightArr,...this.foodSeleNightArr,...this.experienceSeleNightArr,...this.otherArrSele]
				console.log(tagsList)

				uni.setStorageSync('tagsList', tagsList);
				
				this.$sun.navBack()
			},
			switchTagFn(index, tabName) {

				this.currentIndex = index





				this.labelList.forEach((item) => {
					if (tabName == item) {

						if (this.seleNightArr.indexOf(item) != -1) {
							// 删除
							this.seleNightArr.splice(this.seleNightArr.indexOf(item), 1)
						} else {
							// 添加
							this.seleNightArr.push(item)
						}

					}
				})
				this.motionLabelList.forEach((item) => {
					if (tabName == item) {
				
						if (this.motionSeleNightArr.indexOf(item) != -1) {
							// 删除
							this.motionSeleNightArr.splice(this.motionSeleNightArr.indexOf(item), 1)
						} else {
							// 添加
							this.motionSeleNightArr.push(item)
						}
				
					}
				})
				this.traitsLabelList.forEach((item) => {
					if (tabName == item) {
				
						if (this.traitsSeleNightArr.indexOf(item) != -1) {
							// 删除
							this.traitsSeleNightArr.splice(this.traitsSeleNightArr.indexOf(item), 1)
						} else {
							// 添加
							this.traitsSeleNightArr.push(item)
						}
				
					}
				})
				this.foodLabelList.forEach((item) => {
					if (tabName == item) {
				
						if (this.foodSeleNightArr.indexOf(item) != -1) {
							// 删除
							this.foodSeleNightArr.splice(this.foodSeleNightArr.indexOf(item), 1)
						} else {
							// 添加
							this.foodSeleNightArr.push(item)
						}
				
					}
				})
				this.experienceLabelList.forEach((item) => {
					if (tabName == item) {
				
						if (this.experienceSeleNightArr.indexOf(item) != -1) {
							// 删除
							this.experienceSeleNightArr.splice(this.experienceSeleNightArr.indexOf(item), 1)
						} else {
							// 添加
							this.experienceSeleNightArr.push(item)
						}
				
					}
				})
				
				this.otherArr.forEach((item) => {
					if (tabName == item) {
				
						if (this.otherArrSele.indexOf(item) != -1) {
							// 删除
							this.otherArrSele.splice(this.otherArrSele.indexOf(item), 1)
						} else {
							// 添加
							this.otherArrSele.push(item)
						}
				
					}
				})

			},
			// 弹窗——添加/修改单个标签
			singleLabelClick() {
				if (!this.singleLabel) {
					this.$sun.toast('请先输入标签');
				} else {
					this.updateTags();
				}
			},
			// 技师员工标签添加修改
			async updateTags() {
				
			
				this.$sun.toast('添加成功！');
				this.addTag2()
				this.closeTag();
			},
			
			// 关闭 ‘添加标签’弹出框
			closeTag() {
				this.$refs.pop.close();
			},
			//删除标签
			deleteTag(item) {
				console.log(item);
				// 2种删除方式
				// this.tagDeleteList.splice(this.tagDeleteList.indexOf(item), 1);
				this.tagAddList = this.tagAddList.filter(o => {
					return o !== item;
				});
			},
			//添加标签input框回车事件
			addTag2() {
				if(this.addTagType=='1'){
					this.labelList.push(this.singleLabel);
				}else if(this.addTagType=='2'){
					this.motionLabelList.push(this.singleLabel);
				}else if(this.addTagType=='3'){
					this.traitsLabelList.push(this.singleLabel);
				}else if(this.addTagType=='4'){
					this.foodLabelList.push(this.singleLabel);
				}else if(this.addTagType=='5'){
					this.experienceLabelList.push(this.singleLabel);
				}
				
				
				this.singleLabel = '';
			},
		
			
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {
		padding: 40rpx;
		background: linear-gradient(180.00deg, rgb(180, 123, 228), rgb(64, 80, 219) 100%);
		
         .confirm{
			
			 height: 104rpx;
			 border-radius: 200rpx;
			 color: #fff;
			 background: linear-gradient(253.79deg, rgb(253, 111, 151) 14.067%,rgb(252, 168, 158) 99.721%);
			 
		 }
		.tagLabels-active {
			width: 160rpx;
			height: 84rpx;
			border-radius: 202rpx;
			color: #fff;
			background: rgb(203, 209, 255);
			margin: 0 12rpx 20rpx 0;

			// 这里选择 .productClassification 的第 3n 个 .classPadding 子元素
			&:nth-child(4n) {
				margin-right: 0 !important;
			}
		}

		.tagLabels {
			width: 160rpx;
			height: 84rpx;
			border-radius: 202rpx;
			color: #fff;
			background: rgba(255, 255, 255, 0.1);
			margin: 0 12rpx 20rpx 0;

			// 这里选择 .productClassification 的第 3n 个 .classPadding 子元素
			&:nth-child(4n) {
				margin-right: 0 !important;
			}
		}
		.addTag{
			width: 160rpx;
			height: 84rpx;
			border-radius: 202rpx;
			color: #fff;
			background: transparent;
			margin: 0 0rpx 20rpx 0;
			border: 2rpx dashed rgb(255, 255, 255);
		}
		// “添加标签” 弹出框
		.v-pop-cls {
			padding: 46rpx 0 88rpx;
			width: 710rpx;
			height: auto;
			position: relative;
			border-radius: 20rpx;
			background: #fff;
		
			image {
				width: 52rpx;
				height: 52rpx;
				position: absolute;
				padding: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		
			text {
				color: #000;
				font-size: 36rpx;
			}
		
			input {
				// text-align: center;
				padding: 0 20rpx;
				width: 608rpx;
				height: 94rpx;
				margin: 62rpx 0;
				border-radius: 20rpx;
				background: #f5f5f5;
			}
		
			.add {
				width: 638rpx;
				height: 88rpx;
				background: rgb(64, 80, 219);
				color: #fff;
				font-size: 32rpx;
			}
		}
		
	}
</style>